<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景2</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-color: #bfa;
            /* background-image: url("./img/1.png"); */
            /* background-repeat: no-repeat;
             */
             /* background-repeat: repeat-x; */
             /* background-repeat: no-repeat;
             background-position: center left;
             background-position: -20px 100px; */
             /* background-repeat: no-repeat;
             border: 10px red double;
             padding: 20px;
             background-clip:content-box;
             background-origin:content-box; */
            background-image: url("./img/2.jpg");
            background-size: contain;
            background-repeat: no-repeat;
            overflow:auto;
            
        }
        .box2{
            width: 300px;
            height: 1000px;
            /* background-color: red; */
            background-image: url("./img/1.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: 100px 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis ad delectus maiores, ex temporibus reprehenderit rerum recusandae accusantium animi culpa facere, quibusdam nulla asperiores, possimus quaerat maxime natus vel facilis.
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni alias quae odit minus incidunt sequi, veritatis nobis deserunt blanditiis enim tempore voluptatem aliquid nostrum. Ut laborum exercitationem est recusandae. Velit.
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus quaerat recusandae et repellat repudiandae ad ab numquam? Voluptatum ullam quia animi amet laboriosam suscipit, iste, molestias, repudiandae sed voluptatem itaque.
        </div>
    </div>
</body>
</html>